<template>
  <div class="goods-area-container">
    <div class="goods-area-top">
      <div class="goods-area-top-saerch">
        <el-input v-model="searchKey" placeholder="请输入名称" size="small" style="width:240px">
          <el-button slot="suffix" type="text" size="small" class="search-button" @click="search">
            <i class="el-icon-search"></i>
          </el-button>
        </el-input>
      </div>
      <el-button class="goods-area-top-add" type="primary" size="small"
        @click="openAdd = true; isAdd = true; reset()" >新增</el-button>
    </div>

    <div class="goods-area-content">
      <el-table :data="areaData" style="width:100%" row-key="id">
        <el-table-column prop="name" label="分组名称" align="center"></el-table-column>
        <el-table-column prop="format_create_time" label="创建时间" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" @change="upDateStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="action-button" type="text" 
              @click="openAdd = true; areaGroup = scope.row; isAdd = false"><i class="el-icon-edit"/></el-button>
            <el-button class="action-button" 
              @click="isDel = true; groupData = scope.row" type="text">
              <svg-icon icon-class="shanchu"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
 

    <el-dialog :visible.sync="openAdd" :title="isAdd ? '新增' : '修改'" width="800px" center>
      <add-area @success="success" v-if="openAdd" :areaGroup="areaGroup" :isAdd="isAdd"/>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsArea, putGoodsArea } from '@/api/goods'
import AddArea from './components/AddArea'

export default {
  name: 'goodsarea',
  components: {
    AddArea
  },
  data() {
    return {
      areaData: [],

      searchKey: '',
      page: 1,

      openAdd: false,
      isAdd: true,

      areaGroup: {
        area_codes: '',
        city_codes: '',
        name: '',
        status: true,
        key: this.$store.state.app.activeApp.saa_key
      }
    }
  },
  mounted() {
    this.getGoodsArea();
  },
  methods: {
    /**
     * 获取区域列表
     */
    getGoodsArea() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        limit: 10,
        page: this.page
      };
      getGoodsArea(params).then(response => {
        if(response.status === 200){
          this.areaData = response.data;
          this.areaData.forEach(item => {
            if(item.status === '1'){
              item.status = true;
            }else{
              item.status = false;
            }
          });
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 搜索
     */
    search() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: 1,
        limit: 10,
        searchName: this.searchKey
      };
      getGoodsArea(params).then(response => {
        if(response.status === 200){
          this.areaData = response.data;
          this.areaData.forEach(item => {
            if(item.status === '1'){
              item.status = true;
            }else{
              item.status = false;
            }
          });
        }else if( response.status === 204 ){
          this.areaData = [];
          this.$message.warning('未查询到相关数据');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 添加修改成功后回调
     */
    success() {
      this.openAdd = false;
      this.getGoodsArea();
    },
    /**
     * 修改状态
     */
    upDateStatus(data) {
      const params = { 
        id: data.id,
        status: data.status ? '1' : '0',
        key: this.$store.state.app.activeApp.saa_key 
      };
      putGoodsArea(params).then(response => {
        if(response.status === 200){
          this.$message.success('状态修改成功');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 重置
     */
    reset() {
      this.areaGroup = {
        area_codes: '',
        city_codes: '',
        name: '',
        status: true,
        key: this.$store.state.app.activeApp.saa_key
      }
    }
  },
}
</script>

<style lang="css" scoped>
.goods-area-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
} 
.goods-area-top{
  padding: 5px 0;
}
.goods-area-top-saerch{
  float: right;
  max-width: 240px;
}
.search-button{
  padding:5px;
  color:#ccc;
  font-size: 20px;
}
.search-button:hover{
  color: cornflowerblue
}
.goods-area-top-add{
  margin-left:10px;
  padding-left:20px;
  padding-right:20px;
  letter-spacing:5px;
  font-size:14px
}
.goods-area-content{
  padding: 5px 0;
}
</style>